import { createRouter, createWebHistory } from 'vue-router'
import { ActiveViews, MaterialComDesType } from '@/constants'
import { useMaterialStore } from '@/store/useMaterial.ts'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/HomeView.vue'),
    },
    {
      path: '/materials',
      name: 'Materials',
      component: () => import('@/views/MaterialsView/index.vue'),
      redirect: 'select-group',
      children: [
        {
          path: '/select-group',
          name: 'select-group',
          component: () => import('@/views/MaterialsView/SelectGroupView.vue'),
          redirect: MaterialComDesType.SingleSelect,
          children: [
            {
              path: '/single-select',
              name: MaterialComDesType.SingleSelect,
              component: () => import('@/components/Materials/SelectCom/SingleSelect.vue'),
            },
            {
              path: '/multi-select',
              name: MaterialComDesType.MultiSelect,
              component: () => import('@/components/Materials/SelectCom/MultipleSelect.vue'),
            },
            {
              path: '/dropdown-select',
              name: MaterialComDesType.DropDownSelect,
              component: () => import('@/components/Materials/SelectCom/DropDownSelect.vue'),
            },
            {
              path: '/single-image-select',
              name: MaterialComDesType.SingleImageSelect,
              component: () => import('@/components/Materials/SelectCom/SingleImageSelect.vue'),
            },
            {
              path: '/multi-image-select',
              name: 'multi-image-select',
              component: () => import('@/components/Materials/SelectCom/MultipleImageSelect.vue'),
            },
          ],
        },
        {
          path: '/input-group',
          name: 'input-group',
          component: () => import('@/views/MaterialsView/InputGroupView.vue'),
          redirect: MaterialComDesType.TextInput,
          children: [
            {
              path: '/text-input',
              name: MaterialComDesType.TextInput,
              component: () => import('@/components/Materials/Text/Input.vue'),
            },
          ],
        },
        {
          path: '/advanced-group',
          name: 'advanced-group',
          component: () => import('@/views/MaterialsView/AdvancedGroupView.vue'),
          redirect: MaterialComDesType.RateScore,
          children: [
            {
              path: '/rate-score',
              name: MaterialComDesType.RateScore,
              component: () => import('@/components/Materials/Text/RateScore.vue'),
            },
            {
              path: '/date-time',
              name: MaterialComDesType.DateTime,
              component: () => import('@/components/Materials/Text/DateTime.vue'),
            },
          ],
        },
        {
          path: '/note-group',
          name: 'note-group',
          component: () => import('@/views/MaterialsView/NoteGroupView.vue'),
          redirect: MaterialComDesType.TextNote,
          children: [
            {
              path: '/text-note',
              name: MaterialComDesType.TextNote,
              component: () => import('@/components/Materials/Text/TextNote.vue'),
            },
          ],
        },
        {
          path: '/personal-info-group',
          name: 'personal-info-group',
          component: () => import('@/views/MaterialsView/PersonalInfoGroupView.vue'),
        },
        {
          path: '/contact-group',
          name: 'contact-group',
          component: () => import('@/views/MaterialsView/ContactGroupView.vue'),
          redirect: MaterialComDesType.PersonalPhoneNumber,
          children: [
            {
              path: '/phone-number',
              name: MaterialComDesType.PersonalPhoneNumber,
              component: () => import('@/components/Materials/Text/Input.vue'),
            },
            {
              path: '/wechat',
              name: MaterialComDesType.PersonalWechat,
              component: () => import('@/components/Materials/Text/Input.vue'),
            },
            {
              path: '/email',
              name: MaterialComDesType.PersonalEmail,
              component: () => import('@/components/Materials/Text/Input.vue'),
            },
            {
              path: '/qq',
              name: MaterialComDesType.PersonalQQ,
              component: () => import('@/components/Materials/Text/Input.vue'),
            },
            {
              path: '/address',
              name: MaterialComDesType.PersonalAddress,
              component: () => import('@/components/Materials/Text/Input.vue'),
            },
          ],
        },
      ],
    },
    {
      path: '/editor',
      name: 'Editor',
      component: () => import('@/views/EditorView/index.vue'),
      children: [
        {
          path: 'outline',
          name: 'outline',
          component: () => import('@/views/EditorView/Left/outline.vue'),
        },
        {
          path: 'survey-type',
          name: 'survey-type',
          component: () => import('@/views/EditorView/Left/SurveryType.vue'),
        },
      ],
    },
  ],
})

router.beforeEach((to, from, next) => {
  const activeViews = localStorage.getItem('activeViews')
  const store = useMaterialStore()
  if (to.name && activeViews === ActiveViews.Material) {
    store.setCurrentMaterialCom(to.name as MaterialComDesType)
  }
  next()
})

export default router
